AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free. Before you study AngularJS, you should have a basic understanding of:

HTML
CSS
JavaScript

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

The AngularJS Components:

ng-app-This directive defines and links an AngularJS application to HTML.
ng-model-This directive binds the values of AngularJS application data to HTML input controls.
ng-bind- This directive binds the AngularJS Application data to HTML tags.

Example

<!doctype html>
<html ng-app>
  <head>
  <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
</head>


<body> <div> <label>Name:</label> <input type = "text" ng-model = "yourName" placeholder = "Enter a name here"> <hr /> <h1>Hello {{yourName}}!</h1> </div> </body> </html>

Scope:

The scope is the binding part between the HTML (view) and the JavaScript (controller). The scope is an object with the available properties and methods. The scope is available for both the view and the controller.

<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller("shapeController",function($scope) {
  $scope.message = "In shape controller";
  $scope.type = "Shape";
});
</script>

Root Scope:

All applications have a $rootScope which is the scope created on the HTML element that contains the ng-app directive. The rootScope is available in the entire application. If a variable has the same name in both the current scope and in the rootScope, the application use the one in the current scope.

<body ng-app="myApp">

<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>

<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>

<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>

<script>
 var app = angular.module('myApp', []);
 app.run(function($rootScope) {
  $rootScope.color = 'blue';
 });
 app.controller('myCtrl', function($scope) {
   $scope.color = "red";
 });
 </script>
</body>

Services:

AngularJS supports the concepts of “Separation of Concerns” using services architecture. Services are javascript functions and are responsible to do a specific tasks only.

There are two ways to create a service.

factory
service

By using factory method:

var mainApp = angular.module("mainApp", []);
mainApp.factory('MathService', function() {
var factory = {};

factory.multiply = function(a, b) {
  return a * b
}

return factory;
});

By using service method:

mainApp.service('CalcService', 
 function(MathService){
   this.square = function(a) {
    return MathService.multiply(a,a);
 }
});

Routing:

location service.
route service.

Location service:

The $location service is very useful whenever you need to read or change the URL (or any part of it) in the browser. It can be configured to work in two modes: hashbang mode or HTML5 mode

Route sevice:

This service allows you to map different URLs to different views and react whenever there’s a match between a URL and a defined route. To work with the $route service, we need the ngRoute module which can be found in the angular-route.js file.

For any query contact Clofus Innovations.

Contact Us

Just leave your email and our support team will help you

[Tutorial] Angular JS Javascript Framework Getting Started